<template>
  <div class="p-20px">
    <el-card>
      <el-row type="flex" justify="end">
        <el-col :span="20">
          <el-form inline :model="query">
            <el-form-item>
              <el-input v-model="query.username" placeholder="根据用户名搜索" />
            </el-form-item>
            <el-form-item>
              <el-button class="mr-10px" type="default" @click="onClear">
                {{ $t('manage.user.query.clear') }}
              </el-button>
              <el-button type="primary" @click="onSearch">
                {{ $t('manage.user.query.search') }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
            <el-button type="success" size="default" :icon="Edit" @click="isShowDialog = true">
              {{ $t('manage.user.add') }}
            </el-button>
          </el-row>
        </el-col>
      </el-row>

      <el-alert :title="`共 ${total} 条记录`" type="info" show-icon :closable="false" />

      <el-table v-loading="isLoading" :data="list" style="width: 100%;" class="mt-10px mb-15px">
        <el-table-column type="index" width="50" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="permission_group_title" label="权限组名称" />
        <el-table-column prop="role" label="角色" />
        <el-table-column label="操作" width="180">
          <template #default="{row}">
            <template v-if="row.id !== 2">
              <el-button type="primary" :icon="Edit" circle @click="openEdit(row.id)" />
              <el-button type="danger" :icon="Delete" circle @click="delUser(row.id)" />
            </template>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          v-model:current-page="query.page"
          v-model:page-size="query.pagesize"
          :page-sizes="[10, 20, 30, 40]"
        />
      </el-row>
    </el-card>

    <UserAdd v-model:isShowDialog="isShowDialog" :user-id="userId" @update:list="onSearch" />
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { getUserPage, deleteUser } from '@/api/user'
import { UserPageVO, UserQuery } from '@/api/user/types'
import UserAdd from './components/user-add.vue'

const isLoading = ref(false)
const total = ref(0)
const list = ref<UserPageVO[]>([])
const query = reactive<UserQuery>({
  username: '',
  page: 1,
  pagesize: 10
})

function onSearch() {
  isLoading.value = true
  getUserPage(query)
    .then(data => {
      total.value = data.data.counts
      list.value = data.data.list
      isLoading.value = false
    })
    .catch(e => {
      ElMessage.error(e.message || '获取用户列表失败')
      isLoading.value = false
    })
}

function onClear() {
  query.username = ''
  onSearch()
}

onSearch()

watch([() => query.page, () => query.pagesize], onSearch)

async function delUser(id: number) {
  const ret = await ElMessageBox.confirm('此操作将永久删除用户, 是否继续?', '提示').catch(err => err)
  if (ret === 'cancel') return
  await deleteUser(id)
  ElMessage({ message: '删除用户成功', type: 'success' })
  onSearch()
}

// === 编辑 新增
const isShowDialog = ref(false)
const userId = ref<number>()

async function openEdit(id: number) {
  userId.value = id
  isShowDialog.value = true
}
</script>
